<template>
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark"><h4 style="line-height:36px;">轮播图管理</h4></div>
        </el-col>
        <el-col :span="24">
            <div class="padding-content">
                <div class="button" style="margin-bottom:20px;">
                    <el-button type="primary" size="small" @click="dialogTableVisible = true">添加</el-button>
                </div>
                <div class="table">
                    <el-table
                    :data="bannerData"
                    border
                    style="width: 100%"
                    >
                        <el-table-column
                            prop="id"
                            label="轮播图Id">
                        </el-table-column>
                        <el-table-column
                            prop="desc"
                            label="轮播图标题">
                        </el-table-column>
                        <el-table-column
                            label="图片">
                            <template slot-scope="scope">
                                <img :src="scope.row.image_url" class="banner"/>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="activity_url"
                            label="链接地址">
                        </el-table-column>
                        <el-table-column
                            label="状态">
                            <template slot-scope="scope">
                                <span>{{scope.row.state == 0 ? '隐藏' : '开启'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作">
                             <template slot-scope="scope">
                                <el-button type="text" size="small" @click="getEditInfo(scope.row)">修改</el-button>
                                <el-button type="text" size="small" style="color:red" @click="removeBanner(scope.row.id)">修改状态</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-col>
        <el-dialog :visible.sync="dialogTableVisible" title="添加轮播图">
            <div class="form-content">
                <div class="item">
                    <label for="name">轮播图名称:</label>
                    <el-input v-model="name" placeholder="请输入名称"></el-input>
                </div>
                <div class="item">
                    <label for="url">轮播图链接:</label>
                    <el-input v-model="activity_url" placeholder="请输入链接地址"></el-input>
                </div>
                <div class="item">
                    <label for="img">轮播图片</label>
                    <div class="upload-content">
                        <ul class="list">
                            <li v-for="(item,index) in bannerImg" :key="index">
                                <img :src="item" alt="" class="listImg"/>
                                <i class="el-icon-circle-close" ref="delete" @click="deleteImg(index,bannerImg)" :data-index="index"></i>
                            </li>
                        </ul>
                        <div ref="upload" @click="inputFile" class="upload">
                            <input type="file" accept="image/*" name="avatar" ref="inputFile" style="display: none" @change="uploadImg($event,bannerImg)" />
                            <i class="el-icon-plus"></i>
                        </div>
                    </div>
                </div>
                <!-- <div class="item">
                    <label for="url">轮播状态:</label>
                    <el-select v-model="test" placeholder="请选择">
                        <el-option
                            v-for="item in status"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div> -->
            </div>
            <div style="display:flex;justify-content:center">
                <el-button type="primary" @click="submitBanner">添加</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="editBannerVisible" title="修改轮播图" :before-close="handleClose">
            <el-form :model="editBannerInfo" :rules="rules" ref="ruleForm" label-width="15%">
                <el-form-item label="上传图片：" prop="name">
                    <div class="upload-content">
                        <ul class="list">
                            <li v-for="(item,index) in editImgs" :key="index">
                                <img :src="item" alt="" class="listImg"/>
                                <i class="el-icon-circle-close" ref="delete" @click="deleteImg(index,editImgs)" :data-index="index"></i>
                            </li>
                        </ul>
                        <div ref="upload" @click="inputFile" class="upload">
                            <input type="file" accept="image/*" name="avatar" ref="inputFile" style="display: none" @change="uploadImg($event,editImgs)" />
                            <i class="el-icon-plus"></i>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="标题:" prop="desc">
                    <el-input v-model="editBannerInfo.desc" placeholder="请输入轮播图标题" style="width:300;"></el-input>
                </el-form-item>
                <el-form-item label="活动链接:" prop="activity_url">
                    <el-input v-model="editBannerInfo.activity_url" placeholder="请输入活动链接地址" style="width:300;"></el-input>
                </el-form-item>
            </el-form>
            <div style="display:flex;justify-content:center">
                <el-button type="primary" @click="submitEditBanner" :disabled="disabled">确定</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>
<script>
import upload from '../../components/upload'
import axios from "axios";
export default {
    data(){
        return{
            bannerData:[],
            dialogTableVisible:false,
            editBannerVisible:false,
            name:'',
            // url:'',
            bannerImg:[],
            activity_url:'',
            status:[
                {
                    value:'open',
                    label:'启用'
                },
                {
                    value:'close',
                    label:'隐藏'
                }
            ],
            limit:1,
            imagelist:[],
            test:'',
            page:0,
            page_size:10,
            editBannerInfo:{
                banner_id:'',
                image_url:[],
                activity_url:'',
                desc:''
            },
            rules:{
                desc:[
                    { required: true, message: '请输入轮播图标题', trigger: 'blur' }
                ],
                activity_url:[
                    { required: true, message: '请输入活动链接', trigger: 'blur' }
                ],
            },
            editImgs:[]
            // length:true
        }
    },
    components:{
        upload
    },
    computed:{
        disabled(){
            if(!this.editBannerInfo.activity_url || !this.editBannerInfo.desc || this.editBannerInfo.image_url.length>0){
                return true
            }else{
                return false
            }
        }
    },
    methods:{
        handleClose(){
            
        },
        getBannerList(){
            this.$http.get(this.apiObj.banner,{
                page:this.page,
                page_size:this.page_size
            }).then(data=>{
                if(data.status == 200){
                    // console.log(data.content.)
                    this.bannerData = data.content.banner_info
                }
            })
        },
        inputFile() {
            if(this.bannerImg.length >= 1 || this.editImgs.length>=1){
                this.$message({
                    message: '只能上传一张',
                    type: 'warning'
                });
                return
            }
            this.$refs.inputFile.click();
        },
        uploadImg(e,array) {
            let file = e.target.files;
            console.log(this.bannerImg.length)
            for(let i of file){
                // console.log(i)
                if(i.type != "image/jpeg" && i.type != "image/png"){
                    this.$message({
                        message: '上传图片只能是JPG或者PNG格式',
                        type: 'warning'
                    });
                    return false
                }else{
                    var image = new FormData();
                    image.append("image", i);
                }
            }
            this.$http.post(this.apiObj.upload,image).then(res=>{
                if(res.status == 200){
                    array.push(res.content.image_list)
                }
            })
        },
        deleteImg(index,array){
            array.splice(index,1)
        },
        // 提交添加信息
        submitBanner(){
            // console.log(this.bannerImg[0].join(''))
            this.$http.post(this.apiObj.banner,{
                image_url:this.bannerImg[0].join(''),
                activity_url:this.activity_url,
                desc:this.name
            }).then(data=>{
                if(data.status == 200){
                    this.getBannerList()
                    this.dialogTableVisible = false
                    this.$message.success(`${data.content.msg}`)
                }else{
                    this.$message.error(`${data.content.msg}`)
                }
            })
        },
        // 删除
        removeBanner(id){
            let banner_id = id
            this.$http.delete(this.apiObj.banner,{
                banner_id:Number(id)
            }).then(data=>{
                if(data.status == 200){
                    this.getBannerList()
                    this.$message.success('已将状态更改为隐藏')
                }
            })
        },
        // 获取当前修改的banner信息
        getEditInfo(value){
            this.editBannerVisible = true
            this.editImgs = value.image_url.split(',')
            this.editBannerInfo.banner_id = value.id
        },
        submitEditBanner(){
            this.editBannerInfo.image_url = this.editImgs.join(',')
            console.log(this.editBannerInfo)
            this.$http.put(this.apiObj.banner,this.editBannerInfo).then(data=>{
                if(data.status == 200){
                    this.getBannerList()
                    this.editBannerVisible = false
                    this.$message.success(`${data.content.msg}`)
                }else{
                    this.$message.error(`${data.content.msg}`)
                }
            })
        }
    },
    mounted(){
        this.getBannerList()
    }
}
</script>

<style lang="scss" scoped>
.grid-content {
    padding-left: 20px;
    color: #3d789b;
    border:1px solid #c4e9f1;
    border-radius: 4px;
    height: 36px;
}
.bg-purple-dark{
    background: #D9eef7;
}
.button{
    display: flex;
    justify-content: flex-end;
}
.upload{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    width: 100px;
    border:1px dashed #ccc;
    border-radius: 10px;
    i{
        font-size: 50px;
    }
}
.banner{
    height: 50px;
}
.el-form-item{
    display: flex;
    align-items: center;
    /deep/ .el-form-item__content{
        width: 70%;
        margin:0 !important;
        /deep/ .el-input{
            // width: 70% !important;
        }
    }
}
</style>
